:root {
	--body: 0,0,0;
	--tint: 95,101,177;
	--background: 255,255,255;
	--panel: 243,242,247;
	--sidebar-mobile: 255,255,255;
	--divider: 0,0,0,0.1;
	--navbar-panel: 249,249,249;
	--font-regular: system-ui, helvetica, sans-serif;
	--font-rounded: ui-rounded, system-ui, helvetica, sans-serif;
	--primary-length: 100%;
	--secondary-length: 100%;
	--row: 74px;
	--transition-time: 0.6s;
	--toolbar-height: 54px;
	--toolbar-item: var(--tint);
	--tick: url(images/ui/tick-light.svg);
}

@media (min-width: 767px) {
	:root {
		--primary-length: 320px;
	}
}

@media (min-width: 1080px) {
	:root {
		--secondary-length: 320px;
	}
	
}

@media (prefers-color-scheme: dark) {
	:root {
		--body: 255,255,255;
		--tint: 136,143,223;
		--background: 0,0,0;
		--panel: 28,28,30;
		--navbar-panel: 29,29,29;
		--sidebar-mobile: 0,0,0,;
		--divider: 0,0,0,1;
		--tick: url(images/ui/tick-dark.svg);
	}
}

@media (pointer: fine) {
	:root {
		--panel: 233,233,233;
		--navbar-panel: var(--background);
		--toolbar-height: 52px;
		--toolbar-item: 113,113,113;
	}
	
	@media (prefers-color-scheme: dark) {
		:root {
			--panel: 45,45,45;
			--background: 30,30,30;
			--toolbar-item: 255,255,255;
		}
	}
	
	@media (min-width: 767px) {
		:root {
			--primary-length: 200px;
		}
	}
}

.light-theme {
	--body: 0,0,0;
	--tint: 95,101,177;
	--background: 255,255,255;
	--panel: 243,242,247;
	--sidebar-mobile: 255,255,255;
	--divider: 0,0,0,0.1;
	--navbar-panel: 249,249,249;
	--toolbar-item: var(--tint);
	--tick: url(images/ui/tick-light.svg);
}

.dark-theme {
	--body: 255,255,255;
	--tint: 136,143,223;
	--background: 0,0,0;
	--panel: 28,28,30;
	--navbar-panel: 29,29,29;
	--sidebar-mobile: 0,0,0,;
	--divider: 0,0,0,1;
	--tick: url(images/ui/tick-dark.svg);
}

@media (pointer: fine) {
	.light-theme {
		--panel: 233,233,233;
		--navbar-panel: var(--background);
		--toolbar-item: 113,113,113;
	}
	
	.dark-theme {
		--panel: 45,45,45;
		--background: 30,30,30;
		--toolbar-item: 255,255,255;
	}
}

* {
	box-sizing: border-box;
	outline: none;
}

.hidden {
	display: none !important;
}

html {
	margin: 0px;
	padding: 0px;
	width: 100vw;
	height: 100%;
	height: calc(100% + env(safe-area-inset-top));
	overflow: hidden;
	-webkit-user-select: none;
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
	background: rgb(var(--background));
}

body {
	margin: 0px;
	padding: 0px;
	background: black;
	overflow: hidden;
	-webkit-user-select: none;
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
	position: fixed;
	width: 100%;
	height: 100%;
	background: rgb(var(--background));
}

header {
	height: var(--toolbar-height);
	height: calc(var(--toolbar-height) + env(safe-area-inset-top));
	width: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	padding-left: 16px;
	padding-right: 16px;
	padding-top: env(safe-area-inset-top);
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgb(var(--navbar-panel));
	z-index: 1;
}

.noSegmentedControl header {
	border-bottom: 1px solid rgba(var(--body),0.1);
}

h1 {
	font-family: var(--font-regular);
	color: rgb(var(--body));
	font-size: 17px;
	font-weight: bold;
	padding: 0px;
	margin: 0px;
}

@media (pointer: fine) {
	header {
		align-items: center;
		padding-left: 42px;
		border: none;
		justify-content: flex-start;
	}
	
	.noSegmentedControl header {
		border-bottom: none;
	}
	
	@media (min-width: 1080px) {
		header {
			padding-left: 16px;
		}
	}
	
	aside header {
		padding-left: 16px;
	}
	
	@media (min-width: 767px) {
		#supplementary header {
			padding-left: 16px;
		}
	}
	
	h1 {
		font-size: 16px;
	}
}

@media (pointer: coarse) {
	.shadow {
		border-bottom: 1px solid rgba(var(--body),0.1);
	}
}

@media (pointer: fine) {
	.shadow {
		box-shadow: 0px 1px 5px rgba(0,0,0,0.1), 0px 0px 0px 1px rgba(0,0,0,0.1);
	}
	
	@media (prefers-color-scheme: dark) {
		.shadow {
			box-shadow: 0px 2px 10px rgba(0,0,0,0.1), 0px 0px 0px 1px black;
		}
	}
	
	.light-theme .shadow {
		box-shadow: 0px 1px 5px rgba(0,0,0,0.1), 0px 0px 0px 1px rgba(0,0,0,0.1);
	}
	
	.dark-theme .shadow {
		box-shadow: 0px 2px 10px rgba(0,0,0,0.1), 0px 0px 0px 1px black;
	}
}

h3 {
	font-family: var(--font-regular);
	color: rgb(var(--body));
	font-size: 17px;
	font-weight: bold;
	margin-top: 0px;
	margin-bottom: 10px;
	padding: 0px;
	position: relative;
}

#supplementary h3 {
	font-size: 14px;
}

h4 {
	width: 100%;
	font-family: var(--font-regular);
	color: white;
	background: rgb(var(--tint));
	z-index: 20;
	position: absolute;
	bottom: 0px;
	left: 0px;
	text-align: center;
	margin: 0px;
	padding: 20px;
	padding-bottom: calc(20px + env(safe-area-inset-bottom));
}

.legal {
	font-size: 12px;
	font-family: var(--font-regular);
	color: rgba(var(--body),0.5);
	text-align: center;
}

#containerToast {
	margin: 40px 0px 20px 0px;
	width: 100%;
	display: flex;
	justify-content: center;
}

#containerToast svg {
	opacity: 0.3;
	background: none !important;
}

#containerToast svg:hover {
	opacity: 1;
	cursor: pointer;
}

#containerToast g {
	fill: rgb(var(--body));
}

.containerControlSegmented {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	padding: 0px 16px 16px 16px;
	background: rgb(var(--navbar-panel));
	border-bottom: 1px solid rgba(var(--body),0.1);
}

.controlSegmented {
	background: rgba(var(--body),0.05);
	padding: 2px;
	display: flex;
	border-radius: 6px;
	width: 100%;
	height: 32px;
}

.controlSegmented button {
	width: 50%;
	margin: 0px;
	background: none;
	border: none;
	color: rgb(var(--body));
	border-radius: 4px;
	height: 100%;
	font-family: var(--font-regular);
}

.controlSegmented button:hover {
	background: rgba(var(--body),0.1);
	cursor: pointer;
}

.controlSegmented .selected {
	background: white;
	box-shadow: 0px 1px 2px rgba(0,0,0,0.2);
	font-weight: bold;
}

.controlSegmented .selected:hover {
	pointer-events: none;
	background: white;
}

@media (prefers-color-scheme: dark) {
	.controlSegmented .selected {
		background: rgba(255,255,255,0.2);
	}
	
	.controlSegmented .selected:hover {
		background: rgba(255,255,255,0.2);
	}
}

@media (pointer: fine) {
	.controlSegmented {
		background: none;
		box-shadow: inset 0px 0px 0px 1px rgba(var(--body),0.1);
		padding: 0px;
		height: 26px;
	}
	
	.controlSegmented .selected {
		background: rgba(var(--body),0.1);
		box-shadow: none;
		font-weight: normal;
	}
	
	.controlSegmented .selected:hover {
		background: rgba(var(--body),0.1);
	}
	
	@media (min-width: 767px) {
		.containerControlSegmented {
			padding: 0px;
			border: none;
		}
		
		.controlSegmented {
			position: fixed;
			top: 13px;
			right: 16px;
			z-index: 3;
			width: 150px;
		}
	}
}

section {
	background: rgb(var(--panel));
	border-radius: 10px;
	margin-bottom: 40px;
}

section:last-child {
	margin-bottom: 0px;
}

@media (pointer: fine) {
	section {
		background: none;
		border: 1px solid rgba(var(--body),0.1);
	}
}

section + p {
	color: rgb(var(--body));
	font-family: var(--font-regular);
	font-size: 12px;
	margin-top: -30px;
	margin-bottom: 40px;
}

section + p a {
	color: rgb(var(--tint));
}

details {
	overflow: hidden;
}

details:not([open]) {
	height: 55px;
}

summary {
	color: rgb(var(--body));
	font-family: var(--font-regular);
	border-bottom: 1px solid rgb(var(--divider));
	padding: 20px 10px;
	font-size: 12px;
	font-weight: bold;
}

@media (pointer: fine) {
	summary {
		border-bottom: 1px solid rgba(var(--body),0.1);
	}
}

summary:hover {
	cursor: pointer;
	background: rgba(var(--body),0.1);
}

#details {
	overflow: hidden;
}

@media (min-width: 767px) {
	details:not([open]) {
		height: 57px;
	}
	
	summary {
		padding: 20px;
		font-size: 14px;
	}
}

iframe {
	width: 100%;
	height: calc(100% - var(--toolbar-height));
	height: calc(100% - var(--toolbar-height) - env(safe-area-inset-top));
	position: absolute;
	top: var(--toolbar-height);
	top: calc(var(--toolbar-height) + env(safe-area-inset-top));
	left: 0px;
	border: none;
	z-index: -1;
}

.menu {
	position: absolute;
	top: 20px;
	right: 10px;
	background: white !important;
	z-index: 2;
	overflow: hidden;
	box-shadow: 0px 5px 20px rgba(0,0,0,0.1) !important;
	min-width: 180px;
	border: none;
	max-height: 0px;
	opacity: 0;
	transition: 0.3s max-height ease, 0.3s top ease, 0.3s opacity ease;
	padding: 0px;
	border-radius: 5px;
	pointer-events: all;
}

.menu.expanded {
	max-height: 500px !important;
	top: 47px;
	opacity: 1;
	transition: 0.5s max-height ease, 0.5s top ease, 0.5s opacity ease;
}

.menu li {
	font-family: var(--font-regular);
	color: rgb(var(--body));
	padding: 12px 20px 12px 40px !important;
	background-image: none !important;
	list-style: none;
	font-size: 14px;
	text-align: left;
	border-bottom: 1px solid rgba(var(--body),0.1);
}

.menu li:hover {
	background: rgba(var(--body),0.1);
	cursor: pointer;
}

.menu li.picked {
	background-image: var(--tick) !important;
	background-position: 15px center;
	background-repeat: no-repeat;
}

@media (prefers-color-scheme: dark) {
	.menu {
		background: rgb(var(--panel)) !important;
		box-shadow: 0px 5px 30px rgba(0,0,0,0.4) !important;
	}
}

.light-theme .menu {
	background: white !important;
	box-shadow: 0px 5px 20px rgba(0,0,0,0.1) !important;
}

.dark-theme .menu {
	background: rgb(var(--panel)) !important;
	box-shadow: 0px 5px 30px rgba(0,0,0,0.4) !important;
}

.dark-theme .menu li {
	border-bottom: 1px solid rgba(255,255,255,0.1) !important;
}

.menu li:last-child {
	border-bottom: none !important;
}

.containerPanel {
	z-index: 5;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background: rgba(0,0,0,0.8);
}

.panel {
	background: rgb(var(--panel));
	border-radius: 10px;
	box-shadow: 0px 10px 30px rgba(0,0,0,0.5);
	overflow: hidden;
	max-width: 90vw;
	max-height: 90vh;
	overflow: scroll;
	position: relative;
}

.panel h1 {
	text-align: center;
	background: rgb(var(--navbar-panel));
	padding: 20px;
	border-bottom: 1px solid rgba(var(--body),0.1);
}

.panel button {
	position: absolute;
	color: rgb(var(--tint));
	padding: 10px;
	border-radius: 5px;
	border: none;
	background: none;
	top: 9px;
	right: 9px;
	font-size: 14px;
}

.panel button:hover {
	background: rgba(var(--body),0.1);
	cursor: pointer;
}

.panel ul {
	padding-right: 20px;
}

.panel li {
	font-family: var(--font-regular);
	font-size: 16px;
	margin-bottom: 10px;
	color: rgb(var(--body));
}

#containerInstall {
	z-index: 5;
	position: absolute;
	bottom: 0px;
	width: 100%;
	padding: 10px;
}

@media (min-width: 768px) {
	#containerInstall {
		top: 0px;
		top: calc(0px + env(safe-area-inset-top));
		width: 450px;
		right: 0px !important;
	}
}

@supports not (-webkit-touch-callout: inherit) {
	#containerInstall {
		display: none !important;
	}
}

@media (display-mode: standalone) {
	#containerInstall {
		display: none !important;
	}
}

#panelInstall {
	background: white;
	box-shadow: 0px 10px 30px rgba(0,0,0,0.1);
	border-radius: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	padding: 10px;
	border: 1px solid rgb(var(--divider));
	position: relative;
}

@media (prefers-color-scheme: dark) {
	#panelInstall {
		background: #3e3e3e;
	}
}

@media (min-width: 375px) {
	#panelInstall {
		padding: 20px;
	}
}

.light-theme #panelInstall {
	background: white;
}

.dark-theme #panelInstall {
	background: #3e3e3e;
}

#panelInstall button {
	position: absolute;
	top: 5px;
	right: 5px;
	border: none;
	border-radius: 5px;
	padding: 5px;
	background: none;
}

#panelInstall button:hover {
	background: rgba(var(--body),0.1);
	cursor: pointer;
}

#panelInstall button path {
	fill: rgb(var(--tint));
}

#panelInstall p {
	color: rgb(var(--body));
	font-family: var(--font-regular);
	margin: 0px;
	margin-top: 10px;
	display: flex;
	align-items: center;
	font-size: 12px;
}

@media (min-width: 768px) {
	#panelInstall p {
		font-size: 16px;
	}
}

#panelInstall span {
	color: #2987ED;
}

#panelInstall img {
	margin: 0px 10px;
}

/* SHORTCURS PANEL */
#containerShortcuts {
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 5;
	display: grid;
	justify-content: center;
	align-items: center;
	padding: 20px;
	pointer-events: none;
}

#panelShortcuts {
	background: rgba(237,237,239,1);
	border-radius: 20px;
	width: 90vw;
	max-height: 95vh;
	box-shadow: 0px 10px 40px rgba(0,0,0,0.1);
	overflow: auto;
	padding: 20px;
	backdrop-filter: blur(30px);
	-webkit-backdrop-filter: blur(30px);
	pointer-events: all;
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
	#panelShortcuts {
		background: rgba(237,237,239,0.5);
	}
}

#panelShortcuts ul {
	list-style: none;
	padding: 0px;
	margin: 0px;
}

#panelShortcuts li {
	font-family: var(--font-regular);
	color: black;
	display: flex;
	justify-content: space-between;
	font-size: 16px;
	margin-bottom: 20px;
}

#panelShortcuts li:last-child {
	margin-bottom: 0px;
}

@media (min-width: 767px) {
	#panelShortcuts {
		max-width: 50vw;
		padding: 30px;
	}
}

@media (min-width: 1023px) {
	#panelShortcuts {
		border-radius: 30px;
		max-height: 95vh;
	}
	
	#panelShortcuts li {
		font-size: 20px;
		margin-bottom: 30px;
	}
}

/* PRIMARY */
aside {
	background: rgb(var(--sidebar-mobile));
	height: 100%;
	overflow: auto;
	position: absolute;
	width: var(--primary-length);
	padding: 16px;
	--toolbar-height: 85px;
	--navbar-panel: var(--background);
}

@media (min-width: 767px) {
	@media (prefers-color-scheme: dark) {
		aside {
			--navbar-panel: var(--panel);
		}
	}
}

aside header {
	border: none;
	justify-content: flex-start;
	align-items: flex-end;
}

aside h1 {
	background: none;
	font-size: 34px;
}

@media (pointer: fine) {
	aside {
		--toolbar-height: 57px;
	}
	
	aside header {
		align-items: center;
	}
	
	@media (min-width: 768px) {
		aside header {
			align-items: flex-end;
		}
	}
	
	aside h1 {
		font-size: 16px;
	}
}

#buttonInfo {
	padding: 5px;
	border-radius: 5px;
	background: none;
	border: none;
	position: absolute;
	top: 10px;
	top: calc(10px + env(safe-area-inset-top));
	right: 8px;
	z-index: 2;
}

#buttonInfo:hover {
	background: rgba(var(--body),0.1);
	cursor: pointer;
}

#buttonInfo svg {
	height: 25px;
}

@media (pointer: fine) {
	#buttonInfo svg {
		height: 20px;
	}
}

#buttonInfo path {
	fill: rgb(var(--toolbar-item));
}

aside nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 20px;
	margin-top: var(--toolbar-height);
	margin-top: calc(var(--toolbar-height) + env(safe-area-inset-top));
}

aside nav button {
	font-family: var(--font-regular);
	color: rgb(var(--body));
	font-size: 17px;
	padding: 20px 10px;
	border-radius: 10px;
	margin: 0px;
	display: flex;
	align-items: center;
	background: rgb(var(--panel));
	width: 100%;
	border: none;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

aside nav button:hover {
	background: rgba(var(--body),0.2);
	cursor: pointer;
}

aside nav button.selected {
	background: rgb(var(--tint));
	pointer-events: none;
}

aside nav button.selected:hover {
	background: rgb(var(--tint));
	color: white;
	pointer-events: none;
}

aside .selected span {
	color: white;
	background: linear-gradient(to right, #FFFFFF, #FFFFFF);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

aside nav button.secondary {
	background: rgba(var(--body),0.05);
	color: rgb(var(--body));
}

aside .secondary span {
	color: rgb(var(--body));
	background: linear-gradient(to right, rgb(var(--body)), rgb(var(--body)));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

aside nav svg {
	height: 60px;
	margin-bottom: 20px;
}

aside nav path {
	fill: rgb(var(--tint));
}

aside nav .selected path {
	fill: white;
}

aside nav .secondary path {
	fill: rgb(var(--tint));
}

@media (min-width: 767px) {
	aside {
		background: rgb(var(--panel));
		border-right: 1px solid rgba(var(--body),0.1);
		z-index: 4;
	}
	
	aside header {
		background: none;
		pointer-events: none;
	}
	
	aside nav {
		grid-template-columns: 1fr;
		grid-gap: 7px;
	}
	
	aside nav button {
		padding: 9px;
		flex-direction: row;
		justify-content: left;
		align-content: baseline;
		background: none;
	}
	
	aside nav button:hover {
		background: rgba(var(--body),0.05);
	}
	
	aside nav svg {
		height: 26px;
		margin-right: 10px;
		margin-bottom: 0px;
	}
	
	@media (pointer: fine) {
		aside {
			--toolbar-height: 54px;
		}
		
		aside h1 {
			font-size: 12px;
			opacity: 0.3;
		}
		
		aside nav {
			margin-top: 50px;
		}
		
		aside nav svg {
			height: 16px;
		}
		
		aside nav button {
			font-size: 14px;
			border-radius: 5px;
			padding: 7px;
		}
		
		@media (prefers-color-scheme: dark) {
			aside {
				border-right: 1px solid black;
			}
		}
		
		.light-theme aside {
			border-right: 1px solid rgba(var(--body),0.1);
		}
		
		.dark-theme aside {
			border-right: 1px solid black;
		}
	}
}

/* SUPPLEMENTARY */
#supplementary {
	position: absolute;
	transform: translateX(100vw);
	width: 100%;
	height: 100%;
	z-index: 2;
	transition: var(--transition-time) transform ease;
	padding-bottom: env(safe-area-inset-bottom);
	overflow: hidden;
}

#supplementary.active {
	transform: translateX(0px);
	box-shadow: 0px 0px 10px rgba(0,0,0,0.1), 0px 0px 0px 1px rgba(0,0,0,0.1);
	transition: var(--transition-time) transform ease;
}

#supplementary #buttonSupplementaryBack {
	z-index: 3;
	position: absolute;
	background: none;
	border: none;
	border-radius: 5px;
	padding: 5px;
	color: rgb(var(--tint));
	font-size: 17px;
	display: flex;
	flex-direction: row;
	align-items: center;
	top: 10px;
	top: calc(10px + env(safe-area-inset-top));
	left: 5px;
}

#supplementary #buttonSupplementaryBack:hover {
	background: rgb(var(--body),0.1);
	cursor: pointer;
}

#supplementary #buttonSupplementaryBack svg {
	margin-right: 5px;
}

#supplementary #buttonSupplementaryBack path {
	fill: rgb(var(--tint));
}

#supplementary h3 {
	margin-top: 40px;
}

#supplementary h3:first-child  {
	margin-top: 0px;
}

#supplementary #listDevices {
	padding: 66px 16px 16px 16px;
	padding: 66px 16px calc(16px + env(safe-area-inset-bottom)) 16px;
	top: var(--toolbar-height);
	top: calc(var(--toolbar-height) + env(safe-area-inset-top));
	position: absolute;
	width: calc(var(--secondary-length) - 1px);
	height: calc(100% - var(--toolbar-height));
	height: calc(100% - var(--toolbar-height) - env(safe-area-inset-top));
	overflow-y: auto;
	overflow-x: hidden;
	background: rgb(var(--background));
}

#supplementary.noSegmentedControl #listDevices {
	padding: 16px 16px 16px 16px;
	padding: 16px 16px calc(16px + env(safe-area-inset-bottom)) 16px;
}

#supplementary #listDevices nav {
	background: rgb(var(--panel));
	border-radius: 10px;
	margin-bottom: env(safe-area-inset-bottom);
}

#supplementary #listDevices nav button {
	font-family: var(--font-regular);
	color: rgb(var(--body));
	padding: 20px;
	margin: 0px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	background: none;
	border: none;
	width: 100%;
	border-bottom: 1px solid rgb(var(--divider));
	position: relative;
}

#supplementary #listDevices nav button:first-child {
	border-radius: 10px 10px 0px 0px;
}

#supplementary #listDevices nav button:last-child {
	border: none;
	border-radius: 0px 0px 10px 10px;
}

#supplementary #listDevices nav button:hover {
	background: rgba(var(--body),0.1);
	cursor: pointer;
}

#supplementary #listDevices nav .selected {
	background: rgb(var(--tint));
	pointer-events: none;
}

#supplementary #listDevices nav .selected:hover {
	background: rgb(var(--tint));
}

#supplementary #listDevices nav .selected p {
	color: white;
	background: linear-gradient(to right, #FFFFFF, #FFFFFF);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

#supplementary #listDevices nav button div {
	display: flex;
	flex-direction: row;
	align-items: center;
}

#supplementary #listDevices nav button .chevron {
	transform: rotate(180deg) scale(0.7);
	transform-origin: center right;
	opacity: 0.2;
}

.buttonSettings {
	pointer-events: none !important;
}

.buttonSettings:hover {
	background: none !important;
}

.buttonSettings .value {
	font-size: 14px;
	color: rgb(var(--tint));
	pointer-events: all;
	padding: 10px;
	border-radius: 5px;
	text-transform: capitalize;
}

.buttonSettings .value:hover {
	background: rgba(var(--body), 0.1);
}

#supplementary #listDevices nav svg, #supplementary #listDevices nav img {
	margin-right: 10px;
}

#supplementary #listDevices nav path {
	fill: rgb(var(--body));
}

.iconInfo path {
	fill: rgb(var(--tint)) !important;
}

#supplementary #listDevices nav .selected path {
	fill: white !important;
}

#supplementary #listDevices nav p {
	margin: 0px;
	padding: 0px;
	text-align: left;
}

#supplementary #listDevices nav .name {
	font-weight: bold;
	font-size: 17px;
}

.info .name {
	font-size: 14px !important;
	font-weight: 400 !important;
}

#supplementary #listDevices nav .caption {
	font-size: 16px;
	opacity: 0.5;
}

@media (min-width: 767px) {
	#supplementary {
		width: calc(100% - var(--primary-length));
	}
	
	#supplementary.active {
		transform: translateX(var(--primary-length));
		transition: none;
		box-shadow: none;
	}
	
	#supplementary #buttonSupplementaryBack {
		display: none;
	}
	
	@media (pointer: fine) {
		#supplementary #listDevices {
			padding: 0px 16px 16px 16px;
			padding: 0px 16px calc(16px + env(safe-area-inset-bottom)) 16px;
		}
	}
}

@media (min-width: 1080px) {
	#supplementary {
		border-right: 1px solid rgba(var(--body),0.1);
		transform: translateX(var(--primary-length));
		overflow: auto;
		transition: none;
		width: var(--secondary-length);
	}
	
	#supplementary #listDevices nav {
		background: none;
		border-radius: 0px;
	}
	
	#supplementary #listDevices nav button {
		border: none;
		padding: 20px 10px;
	}
	
	#supplementary #listDevices nav button::before {
		content: "";
		width: 100%;
		height: 1px;
		background: rgba(var(--body),0.1);
		position: absolute;
		top: 0px;
		left: 0px;
	}
	
	#supplementary #listDevices nav button:last-child {
		border-bottom: 1px solid rgba(var(--body),0.1);
	}
	
	#supplementary:not(.info) #listDevices nav button:first-child::before,
	#supplementary #listDevices nav .selected::before,
	#supplementary #listDevices nav .selected + button::before,
	#supplementary #listDevices nav .selected + button:last-child::after {
		background: none;
	}
	
	#supplementary #listDevices nav button:first-child,
	#supplementary #listDevices nav button:last-child {
		border-radius: 0px;
	}
	
	#supplementary #listDevices nav .selected {
		border-radius: 10px !important;
	}
	
	#supplementary #listDevices nav button .chevron {
		display: none;
	}
	
	#supplementary #listDevices nav:not(#groupSettings) button:hover {
		border-radius: 10px;
	}
	
	#supplementary #listDevices nav:not(#groupSettings) button:last-child:hover {
		border-bottom: 1px solid transparent;
	}
	
	#supplementary #listDevices nav:not(#groupSettings) button:hover::before,
	#supplementary:not(.info) #listDevices nav:not(#groupSettings) button:hover:first-child::before,
	#supplementary #listDevices nav:not(#groupSettings) button:hover + button::before {
		background: none;
	}
	
	@media (pointer: fine) {
		#supplementary.active {
			transform: translateX(200px));
		}
		
		@media (prefers-color-scheme: dark) {
			#supplementary {
				border-right: 1px solid black;
			}
		}
		
		.light-theme #supplementary {
			border-right: 1px solid rgba(var(--body),0.1);
		}
		
		.dark-theme #supplementary {
			border-right: 1px solid black;
		}
	}
}

@media (pointer: fine) {
	#supplementary #buttonSupplementaryBack {
		top: 9px;
		left: 9px;
	}
	
	#supplementary #buttonSupplementaryBack:hover {
		background: rgb(var(--body),0.1);
	}
	
	#supplementary #buttonSupplementaryBack svg {
		margin-right: 0px;
	}
	
	#supplementary #buttonSupplementaryBack path {
		fill: rgb(var(--body));
	}
	
	#supplementary #buttonSupplementaryBack span {
		display: none;
	}
	
	#supplementary.noSegmentedControl #listDevices {
		padding: 0px 16px 16px 16px;
		padding: 0px 16px calc(16px + env(safe-area-inset-bottom)) 16px;
	}
}

/* MAIN */
main {
	position: absolute;
	width: 100vw;
	height: 100%;
	z-index: 3;
	pointer-events: none;
	transform: translateX(100vw);
	transition: var(--transition-time) transform ease;
	background: rgb(var(--background));
}

main.active {
	transform: translateX(0px);
	box-shadow: 0px 0px 10px rgba(0,0,0,0.1), 0px 0px 0px 1px rgba(0,0,0,0.1);
	transition: var(--transition-time) transform ease;
	pointer-events: all;
}

main #buttonMainBack {
	z-index: 3;
	position: absolute;
	background: none;
	border: none;
	border-radius: 5px;
	padding: 5px;
	color: rgb(var(--tint));
	font-size: 17px;
	display: flex;
	flex-direction: row;
	align-items: center;
	top: 10px;
	top: calc(10px + env(safe-area-inset-top));
	left: 5px;
}

main #buttonMainBack:hover {
	background: rgb(var(--body),0.1);
	cursor: pointer;
}

main #buttonMainBack svg {
	margin-right: 5px;
}

main #buttonMainBack path {
	fill: rgb(var(--tint));
}

main #result {
	padding: 66px 16px 16px 16px;
	padding: 66px 16px calc(16px + env(safe-area-inset-bottom)) 16px;
	top: var(--toolbar-height);
	top: calc(var(--toolbar-height) + env(safe-area-inset-top));
	position: absolute;
	width: 100%;
	height: calc(100% - var(--toolbar-height));
	height: calc(100% - var(--toolbar-height) - env(safe-area-inset-top));
	overflow: auto;
	background: rgb(var(--background));
	margin-bottom: env(safe-area-inset-bottom);
}

main.noSegmentedControl #result {
	padding: 16px 16px 16px 16px;
	padding: 16px 16px calc(16px + env(safe-area-inset-bottom)) 16px;
}

#buttonShare {
	background: none;
	border-radius: 5px;
	border: none;
	padding: 5px;
	position: absolute;
	right: 11px;
	top: 8px;
	top: calc(8px + env(safe-area-inset-top));
}

#buttonShare svg {
	height: 20px;
}

#buttonShare g {
	fill: rgb(var(--toolbar-item));
}

#buttonShare:hover {
	background: rgba(var(--body),0.1);
	cursor: pointer;
}

@media (pointer: fine) {
	@media (min-width: 768px) {
		main:not(.noSegmentedControl) #buttonShare {
			right: 180px;
		}
	}
}

main #models {
	display: flex;
	flex-direction: row;
	padding: 20px 20px 20px 0px;
	overflow: auto;
	scroll-snap-type: x mandatory;
}

main .model {
	width: 160px;
	display: flex;
	align-items: center;
	flex-direction: column;
	scroll-snap-align: start;
}

main .model img {
	margin-bottom: 10px;
}

main .model .name {
	text-align: center;
	color: rgb(var(--body));
	font-family: var(--font-regular);
	font-size: 14px;
	padding: 0px;
	margin: 0px;
}

main .model .year {
	text-align: center;
	color: rgb(var(--body));
	font-family: var(--font-regular);
	font-size: 12px;
	opacity: 0.5;
	padding: 0px;
	margin: 0px;
}

@media (min-width: 767px) {
	main {
		width: calc(100vw - var(--primary-length));
		right: 0px;
		top: 0px;
		overflow: auto;
	}
	
	@media (pointer: fine) {
		main #result {
			padding: 0px 16px 16px 16px;
			padding: 0px 16px calc(16px + env(safe-area-inset-bottom)) 16px;
		}
		
		main.noSegmentedControl #result {
			padding: 0px 16px 16px 16px;
			padding: 0px 16px calc(16px + env(safe-area-inset-bottom)) 16px;
		}
	}
}

@media (min-width: 1080px) {
	main {
		width: calc(100vw - (var(--primary-length) + var(--secondary-length)));
	}
	
	main.active {
		transition: none;
		box-shadow: none;
	}
	
	main #buttonMainBack {
		display: none;
	}
}

@media (min-width: 1600px) {
	main #result {
		padding: 0px 15% 16px 15%;
		padding: 0px 15% calc(16px + env(safe-area-inset-bottom)) 15%;
	}
	
	main.noSegmentedControl #result {
		padding: 0px 15% 16px 15%;
		padding: 0px 15% calc(16px + env(safe-area-inset-bottom)) 15%;
	}
}

@media (pointer: fine) {
	main #buttonMainBack {
		top: 9px;
		left: 9px;
	}
	
	main #buttonMainBack:hover {
		background: rgb(var(--body),0.1);
	}
	
	main #buttonMainBack svg {
		margin-right: 0px;
	}
	
	main #buttonMainBack path {
		fill: rgb(var(--body));
	}
	
	main #buttonMainBack span {
		display: none;
	}
}

@media (pointer: fine) {
	main header {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

/* TABLEVIEW */
.row {
	display: flex;
	align-items: center;
	padding: 20px 10px;
	border-bottom: 1px solid rgba(var(--divider));
}

section .row:last-child {
	border: none;
}

.row svg {
	margin-right: 10px;
	display: none;
}

.row path {
	fill: rgb(var(--body));
}

.row rect {
	fill: rgb(var(--tint));
}

.rowTitle {
	display: flex;
	width: 100%;
	flex-direction: column;
}

.rowTitle p {
	color: rgb(var(--body));
	font-family: var(--font-regular);
	font-size: 12px;
	margin: 0px;
	padding: 0px;
}

.row .name {
	margin-bottom: 5px;
}

.containerMeasurement {
	display: flex;
}

.containerMeasurement div:first-child {
	margin-right: 10px;
}

.measurement {
	display: flex;
	flex-direction: row;
	width: 50%;
}

.measurement .label {
	padding: 0px;
	margin: 0px;
	font-family: var(--font-regular);
	color: rgb(var(--body));
	font-weight: 500;
	opacity: 0.5;
	margin-right: 5px;
}

.measurement .label::after {
	content: ":";
}

.row .value {
	padding: 0px;
	margin: 0px;
	font-family: var(--font-rounded);
	color: rgb(var(--body));
	font-weight: bold;
	font-weight: 600;
}

@media (pointer: fine) {
	.row {
		border-bottom: 1px solid rgba(var(--body),0.1);
	}
}

@media (min-width: 375px) {
	.row svg {
		display: block;
	}
	
	.measurement {
		width: 140px;
	}
}

@media (min-width: 800px) {
	.rowTitle p {
		font-size: 16px;
	}
	
	.measurement {
		width: 200px;
	}
}

@media (min-width: 1195px) {
	.row {
		padding: 20px;
		border-bottom: 1px solid rgba(var(--body),0.1);
	}
	
	.rowTitle {
		justify-content: space-between;
		flex-direction: row;
		align-items: center;
	}
	
	.rowTitle p {
		font-size: 16px;
		font-weight: 600;
	}
	
	.row .name {
		margin-bottom: 0px;
	}
	
	.measurement {
		width: 130px;
		flex-direction: column;
	}
	
	.measurement .label {
		font-size: 12px;
	}
	
	.measurement .label::after {
		content: "";
	}
}